<template>
    <view>
        <swiper class="swiper" indicator-dots autoplay>
            <swiper-item v-for="item in swiper" :key="item.id">
                <image :src="item.swiper1" mode=""></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    name: "swiper",
    data() {
        return {
            swiper: [
                {
                    swiper1: "../../static/iamges/shouyelunbo@2x.png",
                },
                {
                    swiper1: "../../static/iamges/shouyelunbo@2x.png",
                },
                {
                   swiper1: "../../static/iamges/jijinlunbo@2x.png",
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.swiper {
    width: 100%;
    //  height: calc(100vw * 100 / 351);

    swiper-item {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
		border-radius: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
        // image {

        //     position: relative;
        // }
        // .imgs {
        //     position: absolute;
        //     width: 200px;
        //     height: 30px;
        //     top: 0px;
        //     left: 20px;
        //     bottom: 0px;
        //     right: 350rpx;
        //     margin: auto auto;
        // }
        // text {
        //     position: absolute;
        //     margin: auto auto;
        //     top: 7px;
        //     left: 400rpx;
        //     bottom: 0px;
        //     color: white;
        //     font-size: 25rpx;

        //     // right: 1100rpx;
        //     // top: 170px;
        // }
    }
}
</style>
